<template>
  <div class="main">
    <h2>{{ $t('Command') }}</h2>
    <el-card v-if="isLogin">
      <div class="user-card">
        <div class="user-avatar">
          <img :src="userAvatar" width="120px" height="120px" class="avatar-image" :title="$t('Avatar')" />
        </div>
        <div class="user-name">
          <div class="user-info">
            <i class="success el-icon-finished" style="margin-right: 5px;" />
            <span>{{ userName }}</span>
          </div>
          <el-button type="text" icon="el-icon-switch-button" :title="$t('Logout')" @click="handleLogout" />
        </div>
        <div class="user-command">
          <el-button :loading="commanding" size="medium" type="primary" style="width: 100%"
            @click.native.prevent="doCommand">
            <span>{{ command.action }}</span>
          </el-button>
        </div>
      </div>
    </el-card>
    <el-card v-else>
      <el-form ref="loginForm" :model="user" :rules="loginRules">
        <el-form-item :label="$t('user.Username')" prop="username">
          <el-input v-model="user.username" :placeholder="$t('user.Username')" />
        </el-form-item>
        <el-form-item :label="$t('index.Password')" prop="password">
          <el-input v-model="user.password" type="password" :placeholder="$t('index.Password')" />
        </el-form-item>
        <el-form-item>
          <el-button :loading="commanding" size="medium" type="primary" style="width: 100%"
            @click.native.prevent="handleLogin">
            <span>{{ command.action }}</span>
          </el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>
<script>
  import {
    getToken
  } from "@/utils/auth";
  import deviceAPI from "@/api/device/device";
  import {
    parseType
  } from '@/views/device/common'

  export default {
    name: 'LinkerCommand',
    data() {
      const vm = this
      return {
        actionMap: [{
          index: 0
        }, {
          index: 1
        }, {
          index: 2
        }, {
          index: 3
        }, {
          index: 4
        }, {
          index: 5
        }, {
          index: 6
        }, {
          index: 7
        }, {
          index: 8
        }, {
          index: 9
        }, {
          index: 10
        }, {
          index: 11
        }, {
          index: 12
        }, {
          index: 13
        }, {
          index: 14
        }, {
          index: 15,
          'ON': vm.$t('On'),
          'OFF': vm.$t('Off'),
        }, {
          index: 16
        }, {
          index: 17,
          'ON': vm.$t('On'),
          'OFF': vm.$t('Off'),
        }],
        commanding: false,
        user: {
          username: null,
          password: null
        },
        loginRules: {
          username: [{
            required: true,
            trigger: "blur",
            message: vm.$t("login.InputAccount"),
          }, ],
          password: [{
            required: true,
            trigger: "blur",
            message: vm.$t("login.InputPassword"),
          }, ],
        },
        isLogin: false,
        command: {
          code: '',
          action: null,
          command: null,
          content: null,
        }
      }
    },
    computed: {
      userAvatar() {
        return this.$store.getters.avatar
      },
      userName() {
        return this.$store.getters.name
      }
    },
    created() {
      this.checkLogin()
      this.parseCommand(this.$route.query)
    },
    methods: {
      checkLogin() {
        if (!getToken()) {
          this.isLogin = false
          return
        }
        if (this.$store.getters.loginUser !== null) {
          this.isLogin = true
        }
      },
      getLoginUser() {
        const vm = this
        this.$store
          .dispatch("GetInfo").then(() => {
            vm.isLogin = true
          })
      },
      handleLogout() {
        const vm = this
        this.$store.dispatch('LogOut').then(() => {
          vm.isLogin = false
        })
      },
      handleLogin() {
        const vm = this
        this.$refs.loginForm.validate((valid) => {
          if (!valid) {
            return
          }
          vm.commanding = true;
          vm.$store
            .dispatch("Login", vm.user)
            .then(() => {
              vm.getLoginUser()
              vm.doCommand()
            })
            .catch(() => {
              vm.commanding = false;
            });
        });
      },
      parseCommand({
        code,
        key,
        status
      }) {
        const type = parseType(code)
        if (type < 0) {
          return
        }
        this.command.code = code
        this.command.action = this.actionMap[type][status]
        const message = {}
        message[key] = status
        if (code.indexOf('PLATFORM_') >= 0) {
          this.command.command = 'control'
          this.command.content = JSON.stringify(message)
          return
        }
        if (code.indexOf("BleGate_") >= 0) {
          if (type == 17) {
            const data = {
              "PackageType": 0,
              "DeviceControl": {
                "DevMac": code.split("@").pop(),
                "Message": message
              }
            }
            this.command.command = 'control'
            this.command.content = JSON.stringify(data)
            return
          }
        }
      },
      doCommand() {
        const {
          code,
          command,
          content,
          action
        } = this.command
        this.commanding = true;
        deviceAPI
          .command({
            code,
            command,
            content,
            action,
          })
          .then(() => {
            this.commanding = false;
          }).catch(() => {
            this.commanding = false;
          })
      },
    }
  }

</script>

<style scoped>
  .main {
    width: 360px;
    margin: 66px auto 0 auto;
  }

  .user-card {
    text-align: center;
  }

  .user-avatar {
    margin: 3px;
    padding: 5px;
    /* height: 160px; */
  }

  .avatar-image {

    border-radius: 15px;
  }

  .user-name {
    margin: 3px;
    padding: 5px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
  }

  .user-info {
    width: 180px;
    padding: 5px;
    text-align: left;
  }

  .user-command {
    margin: 3px;
    padding: 5px;
  }

</style>
